@extends('public.iframe_base')
@section('title', '属性选择')
@section('content')
    <style>
        /* 防止下拉框的下拉列表被隐藏---必须设置--- */
        .layui-table-cell {
            overflow: visible !important;
        }

        /* 使得下拉框与单元格刚好合适 */
        td .layui-form-select {
            margin-top: -10px;
            margin-left: -15px;
            margin-right: -15px;
        }
    </style>

    <div class="demoTable layui-form">
        <div class="layui-input-inline">
            <select id="group_list" style="width: 150px;">
                @foreach($condition_name as $key=>$item)
                    <option @if($item->name =='前端' || $item->name =='后端')disabled
                            @endif value="{{$item->name}}">{{$item->name}}</option>
                @endforeach
            </select>
        </div>
        <button class="layui-btn layui-btn-danger layui-btn-radius" data-type="del_group">删除板块</button>

        <div class="layui-input-inline">
            <input class="layui-input" id="group_name" placeholder="板块名称" autocomplete="off">
        </div>
        {{--        <div class="layui-input-inline">--}}
        {{--            <input type="radio" name="back_end" value="0" title="前端">--}}
        {{--            <input type="radio" name="back_end" value="1" title="后端" checked>--}}
        {{--        </div>--}}

        <button class="layui-btn layui-btn-radius" data-type="add_group">添加板块</button>

    </div>

    <div style="margin-bottom: 50px">
        <table id="table" lay-filter="table"></table>
        {{--            工具栏按钮--}}
        <script type="text/html" id="toolbar">
            <div class="layui-btn-container">
                @foreach($condition_name as $key=>$item)
                    @if($item->back_end == true)
                        <button class="layui-btn layui-btn-sm"
                                lay-event="{{$item->name}}">{{$item->name}}<span
                                    class="{{$item->name}} "></span>
                        </button>
                    @else
                        <button class="layui-btn layui-btn-sm layui-btn-normal"
                                lay-event="{{$item->name}}">{{$item->name}}<span
                                    class="{{$item->name}}"></span>
                        </button>
                    @endif

                @endforeach
            </div>
        </script>


        <script type="text/html" id="showTpl">
            <input type="checkbox" name="sex" value="@{{  d.show }}" lay-skin="switch" lay-text="显示|隐藏"
                   lay-filter="switchShow" @{{ d.show== 1 ? 'checked' : '' }}>
        </script>
        {{--        下拉选择框--}}
        <script type="text/html" id="show_valueTpl">
            <select name="interest">
                <option value="">全部</option>
                @{{# layui.each(d.show_value_unique, function(index, item){ }}
                <option value="@{{ item.suffix }}" selected="">@{{ item.suffix }}</option>
                @{{# }); }}
            </select>
        </script>
    </div>

@endsection
@section('script')
    <script type="text/javascript" src="/static/js/laydate.js"></script>
    <script>
        var group_name = '后端';
        var current_data = [];
        //表格
        CreateTable('0');

        //监听单元格编辑
        layui.table.on('edit(table)', function (obj) {
            $.ajax({
                url: '/member/manager/domain/induce/condition/save',
                type: "post",
                data: {'_token': '{{csrf_token()}}', 'data': obj.data},
                success: function (data) {
                    if (data.msg === 'success') {
                        layer.msg('成功', {icon: 1, time: 500}, function () {
                        })
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                },
                error: function (xhr, Status, error) {
                    layer.msg(Status + ':' + xhr.responseJSON.data, {icon: 2});
                }
            });
        });

        //监听搜索按钮
        var active = {
            add_group: function () {
                var group_name = $('#group_name').val();
                if (group_name ==''){
                    layer.msg('请输入名称');
                    return false;
                }
                $.ajax({
                    url: '/member/manager/domain/induce/condition/create',
                    type: "post",
                    data: {'_token': '{{csrf_token()}}', 'group_name': group_name, 'back_end': 1},
                    success: function (data) {
                        if (data.msg === 'success') {
                            layer.msg('成功', {icon: 1, time: 500}, function () {
                                window.location.reload();
                            })
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    error: function (xhr, Status, error) {
                        layer.msg(Status + ':' + xhr.responseJSON.data, {icon: 2});
                    }
                });
            },
            del_group: function () {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: '/member/manager/domain/induce/condition/del',
                        type: "post",
                        data: {'_token': '{{csrf_token()}}', 'group_name': $('#group_list').val()},
                        success: function (data) {
                            if (data.msg === 'success') {
                                layer.msg('成功', {icon: 1, time: 500}, function () {
                                    window.location.reload();
                                })
                            } else {
                                layer.msg(data.msg, {icon: 2});
                            }
                        },
                        error: function (xhr, Status, error) {
                            layer.msg(Status + ':' + xhr.responseJSON.data, {icon: 2});
                        }
                    });
                });
            }
        };

        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听锁定操作 (switch)
        layui.form.on('switch(switchShow)', function (obj) {
            var show = obj.elem.checked;
            layui.table.on('row(table)', function (obj) {
                obj.data.show = show ? 1 : 0;
                $.ajax({
                    url: '/member/manager/domain/induce/condition/save',
                    type: "post",
                    data: {'_token': '{{csrf_token()}}', 'data': obj.data},
                    success: function (data) {
                        if (data.msg === 'success') {
                            layer.msg('成功', {icon: 1, time: 500}, function () {
                            })
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    },
                    error: function (xhr, Status, error) {
                        layer.msg(Status + ':' + xhr.responseJSON.data, {icon: 2});
                    }
                });
            });


        });
        //监听工具栏事件
        layui.table.on('toolbar(table)', function (obj) {
            switch (obj.event) {
                @foreach($condition_name as $item)
                case '{{$item->name}}':
                    group_name = '{{$item->name}}';
                    console.log('{{$item->name}}');
                    CreateTable('{{$item->back_end}}');
                    break;
                    @endforeach

            }
        });

        //监听行单击事件（双击事件为：rowDouble）
        layui.table.on('row(table)', function (obj) {
            current_data = obj.data;
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });

        //获取选中数据
        function getCheckStatusItem() {
            var checkStatus = layui.table.checkStatus('table');
            var data = checkStatus.data;  //获取选中行数据
            var ids = [];
            $.each(data, function ($key, $el) {
                ids.push($el.id);
            });
            return ids;
        }

        function CreateTable(back_end) {
            layui.table.render({
                elem: '#table'
                , id: 'id_table'
                //  , toolbar: '#toolbar'
                , url: '/member/manager/domain/induce/condition?group_name=' + group_name + '&back_end=' + back_end//数据接口
                , method: 'POST'
                , headers: {'X-CSRF-TOKEN': '{{csrf_token()}}'}
                , parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.count, //解析数据长度
                        "data": res.data //解析数据列表
                    };
                }
                , cols: [[ //表头
                    {field: 'key_name', title: '名称', fixed: 'left'}
                    , {field: 'show', title: '显示', width: 110, templet: '#showTpl'}
                    // , {field: 'show_value', title: '筛选显示', width: 200, templet: '#show_valueTpl'}
                    , {field: 'sort', title: '排序', edit: 'text', width: 110}
                ]]
                , defaultToolbar: [] //'filter', 'exports', 'print'
                , toolbar: '#toolbar'
                , done: function () {
                    $('.' + group_name).addClass('layui-badge-dot');
                }
            });
        }

    </script>
@endsection
